<template>
	<div class="vertical-tabs">
		<!-- 左侧固定标签导航 -->
		<div class="tab-nav fixed">
			<div class="tab-item" :class="{ active: currentTab === index }" v-for="(tab, index) in tabs" :key="index"
				@click="handleTabClick(index)">
				{{ tab }}
			</div>
		</div>
		<!-- 右侧内容展示 -->
		<div class="tab-content">
			<HamburgerFries v-if="currentTab === 0" />
			<SpicyhotDishes v-if="currentTab === 1" />
			<Dumplings v-if="currentTab === 2" />
			<RiceFlour v-if="currentTab === 3" />
		</div>
	</div>
</template>

<script>
	import HamburgerFries from '@/views/product/HamburgerFries.vue';
	import SpicyhotDishes from '@/views/product/SpicyhotDishes.vue';
	import Dumplings from '@/views/product/Dumplings.vue';
	import RiceFlour from '@/views/product/RiceFlour.vue';

	export default {
		components: {
			HamburgerFries,
			SpicyhotDishes,
			Dumplings,
			RiceFlour
		},
		data() {
			return {
				tabs: ['汉堡薯条', '麻辣烫冒菜', '饺子馄饨', '米粉面馆'],
				currentTab: 0
			};
		},
		methods: {
			handleTabClick(index) {
				this.switchTab(index);
				const currentItem = this.tabs[index];
				const browseHistory = JSON.parse(localStorage.getItem('browseHistory')) || [];
				const newItem = {
					product_id: index, // 可以根据实际情况修改id
					title: currentItem,
					price: 0, // 可以根据实际情况修改价格
					pic: '' // 可以根据实际情况修改图片地址
				};
				// 避免重复记录
				const existingIndex = browseHistory.findIndex(item => item.product_id === newItem.product_id);
				if (existingIndex > -1) {
					browseHistory.splice(existingIndex, 1);
				}
				browseHistory.unshift(newItem);
				localStorage.setItem('browseHistory', JSON.stringify(browseHistory));
			},
			switchTab(index) {
				this.currentTab = index;
			}
		}
	};
</script>

<style scoped>
	.vertical-tabs {
		display: flex;
		min-height: 300px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}

	.tab-nav.fixed {
		position: fixed;
		top: 50px;
		left: 0;
		width: 130px;
		height: 830px;
		background-color: #f8f8f8;
		border-right: 1px solid #eee;
		overflow-y: auto;
	}

	.tab-item {
		padding: 20px;
		cursor: pointer;
		text-align: center;
	}

	.tab-item.active {
		background-color: white;
		color: #ff6600;
		border-right: 2px solid #ff6600;
	}

	.tab-content {
		background-color: white;
		height: 830px;
		padding: 0 10px;
		margin-left: 105px;
		margin-top: 50px;
		overflow-y: auto;
	}
</style>